<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import { queryBikeProductTableCol, productParasType } from '@/api/term/types/term'
const props = defineProps<{
  data: queryBikeProductTableCol
}>()
const dialogVisible = ref<boolean>(false)
const open = () => {
  dialogVisible.value = true
}
defineExpose({ open })
const productParas = ref<productParasType[]>([])
watchEffect(() => {
  const obj: Record<string, any> = {}
  productParas.value = props.data.productParas
  for (const key in productParas.value[0]) {
    if (/[\u4E00-\u9FA5]/.test(key)) {
      obj[key] = props.data.productParas[0][key]
    }
    if (key == 'productModel') {
      obj['车辆型号'] = props.data.productParas[0][key]
    }
  }
  productParas.value[0] = obj
})
</script>

<template>
  <el-dialog v-model="dialogVisible" title="更多信息" class="biketerm-dialog">
    <div>
      <span>车辆信息</span>
      <div flex items-center v-if="data.imageUrls">
        <img v-for="(image, i) in data.imageUrls.split(',')" :key="i" :src="image" alt="" />
      </div>
    </div>
    <div>
      <span>车辆参数</span>
      <el-table :data="productParas" v-if="productParas">
        <el-table-column
          v-for="(value, name, index) in productParas[0]"
          :key="index"
          :label="name"
          :prop="name"
        />
      </el-table>
    </div>
    <div>
      <span>可租周期</span>
      <el-table :data="data.rentablePeriod" v-if="data.rentablePeriod">
        <el-table-column
          v-for="(value, name, index) in data.rentablePeriod[0]"
          :key="index"
          :label="name"
          :prop="name"
        />
      </el-table>
    </div>
  </el-dialog>
</template>

<style scoped></style>
